<template>
  <header class="main-header">

    <!-- Logo -->
    <a  class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini" v-html="mini_brand"></span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg" v-html="brand"></span>
    </a>

    <!-- Header Navbar -->
    <nav  class="navbar navbar-static-top" role="navigation" style="display: flex">
      <!-- Sidebar toggle button-->
      <a @click="sideBarSwitch" href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>
      <div style="flex-grow: 10">
        <components v-for="head in left_header_bar_widgets" :is="head.editor" :ctx="head"></components>
      </div>


      <!--            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">-->
      <!--                <span class="sr-only">Toggle navigation</span>-->
      <!--            </a>-->

      <!-- Navbar Right Menu -->
      <div  class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!--                    下拉菜单样例-->
          <li style="display: none;" class="dropdown messages-menu">
            <!-- Menu toggle button -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-envelope-o"></i>
              <span class="label label-success">4</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have 4 messages</li>
              <li>
                <!-- inner menu: contains the messages -->
                <ul class="menu">
                  <li><!-- start message -->
                    <a href="#">
                      <div class="pull-left">
                        <!-- User Image -->
                        <!--<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
                      </div>
                      <!-- Message title and timestamp -->
                      <h4>
                        Support Team
                        <small><i class="fa fa-clock-o"></i> 5 mins</small>
                      </h4>
                      <!-- The message -->
                      <p>Why not buy a new awesome theme?</p>
                    </a>
                  </li>
                  <!-- end message -->
                </ul>
                <!-- /.menu -->
              </li>
              <li class="footer"><a href="#">See All Messages</a></li>
            </ul>
          </li>

          <component :is="widget.editor" :ctx="widget" v-for="widget in header_bar_widgets"></component>

          <!-- Control Sidebar Toggle Button -->
          <template v-if="fast_config_panel">
            <li>
              <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
            </li>
          </template>

        </ul>
      </div>
    </nav>
  </header>
</template>

<script>
export default {
  props:{
    head_bar_data:{},
    fast_config_panel:{
      default:false
    }
  },
  data(){

    return {
      user:this.head_bar_data.user,
      mini_brand:this.head_bar_data.mini_brand,
      brand:this.head_bar_data.brand,
      header_bar_widgets:this.head_bar_data.header_bar_widgets,
      left_header_bar_widgets:this.head_bar_data.left_header_bar_widgets,
      tr:cfg.tr,
      // user_msg:user_msg,
    }
  },
  mounted:function(){
    $('.sidebar-toggle').click(function(){
      Vue.nextTick(function(){
        rootStore.$emit('content_resize')
      })
    })
    $(window).resize(function(){
      Vue.nextTick(function(){
        rootStore.$emit('content_resize')
      })
    })
  },
  methods:{
    sideBarSwitch(){
      setTimeout(()=>{
        this.$root.$emit('sidebar-collapse-switch')
      },100)

    }
  }
}
</script>